<template>
                      <!-- 滚动监听事件 -->
  <div class="home" @scroll='scroll'>
    
    <!-- 默认不显示 -->
    <cols-header class="border fixed" v-show="show" />
    <!-- <div class="con" @click="goSign"></div> -->
    123
    <!-- 
      v-model 使用在input标签上表示的是v-bind和@input的结合
      v-model 使用在select标签上表示的是v-bind 和@chenge的结合
     -->
    <wgy-input v-model="content" type='password' placeholder="请输入密码"></wgy-input>
    <!-- <p>{{content}}</p> -->
    <wgy-button type='primary'>点击</wgy-button>
    <wgy-button type='danger'>删除</wgy-button>
    <wgy-button type='warn'>编辑</wgy-button>
    <wgy-button type='yellow'>保存</wgy-button>

    <wgy-swiper :banners="banners" autoplay></wgy-swiper>
  </div>
</template>

<script>
import { getBanners } from '../../utils/api/Home'
import colsHeader from '@/components/colsHeader/colsHeader'
import wgyInput from '@/components/wgy-input/wgy-input'
import wgyButton from '@/components/wgy-button/wgy-button'
import wgySwiper from '@/components/wgy-Swiper/wgy-Swiper'
export default {
  name: 'Home',
  data() {
    return {
      show:false,
      content:'',
      banners:[],
    }
  },
  // 挂载子组件
  components: {
    colsHeader,
    wgyInput,
    wgyButton,
    wgySwiper
  },
  created() {
    getBanners().then(res => {
      console.log(res);
      
      this.banners = res
    })
  },
  methods: {
    // 滚动事件
    scroll(e){ 
      console.log(e.target.scrollTop);
      // 大于400显示 
      this.show = e.target.scrollTop>400 ? true : false
    },
    goSign() {
      this.$router.push('sign')
    } 
  }
}
</script>

<style lang="scss" scoped>
  .home{
    height:100%;
    overflow: auto;
    overflow-x: hidden;
    .con{
    height: 2000px;
    background-color: aqua;
  }
  .fixed{
    position: fixed;
  }
  }
  
</style>
